import React from 'react';
import { Animated, Text, View, StyleSheet, Image, PanResponder, Easing, Dimensions, TouchableOpacity, TouchableHighlight, TouchableWithoutFeedback, TextInput} from 'react-native';
import { scaleSize } from './components/common';

export default class FadeInView extends React.Component {
  constructor(props) {
    super(props);
    this._handlePanResponderMove = this._handlePanResponderMove.bind(this);
    this._handlePanResponderEnd = this._handlePanResponderEnd.bind(this);
    this._onPressButton = this._onPressButton.bind(this);
    this._onReturnButton = this._onReturnButton.bind(this);
    this.state = {
      deviceWidth: Dimensions.get('window').width, // 设备宽度
      deviceHeight: Dimensions.get('window').height, // 设备高度
      translateX: new Animated.Value(0), // View移动距离
      sIndex: 0, // 当前页
      isPrevMove: false, // 是否往上一页移动
      moveLeft: 0, // swiper向左移动距离
      moveTop: 0, // 标题滑动距离
      buttonScale: new Animated.Value(), // detail按钮缩放变化
      buttonOpacity: new Animated.Value(), // detail按钮透明度变化
      buttonZIndex: 0, // detail按钮zindex
      imgScale: new Animated.Value(1), // 图片放大比例
      defaultImgScale: 1, // 放大比例 计算方法: (当前图片距离顶部的距离*2 + 图片高度)/图片高度
      detailBottomTranslate: new Animated.Value(0), // 详情底部空白移动距离
      defaultDetailBottomHeight: 0, // 详情底部空白高度, 根据defaultSetDetailBottomHeight和页面高度计算出来的, 为了比例展示
      defaultDetailReturnTranslate: 0, // 返回按钮位移
      detailReturnTranslate: new Animated.Value(0), // 返回按钮位移
      detailBottomTitleTranslate: new Animated.Value(), // 标题位移
      detailBottomButtonRotate: new Animated.Value(0), // 按钮旋转
      detailButtonTitleRotate: '0deg', // 文字翻转回去
      detailButtonTitle: '', // 按钮文案
      detailButtonColor: '', // 按钮背景颜色
      detailBottomLineTranslate: new Animated.Value(), // 线位移
      detailBottomContentTranslate: new Animated.Value(), // 内容位移
      scaleImgZIndex: 0, // 被放大的图片的zindex



      swiperWidth: scaleSize(610), // View宽度
      swiperTop: scaleSize(330), // swpier距离顶部距离
      imgWidth: scaleSize(540), // 内容宽度
      imgHeight: scaleSize(700), // 内容高度
      defaultOpacity: [0, 0.5], // 默认透明度
      defaultScale: 0.6, // 默认缩放比例1-0.6区间
      imgArr: [ // 页面数据
        {
          imgUrl: 'https://img.alicdn.com/imgextra/i1/1917047079/TB1zpA1XxTpK1RjSZFKXXa2wXXa_!!0-item_pic.jpg_430x430q90.jpg',
          title: 'CCC',
          description: 'cccccc | 1234'
        },
        {
          imgUrl: 'https://img.alicdn.com/imgextra/i4/1917047079/TB20BE0XzDpK1RjSZFrXXa78VXa_!!1917047079.jpg_430x430q90.jpg',
          title: 'AAA',
          description: 'aaaaaa | 1234'
        },
        {
          imgUrl: 'https://img.alicdn.com/imgextra/i3/1917047079/TB2xJ31Xq6qK1RjSZFmXXX0PFXa_!!1917047079.jpg_430x430q90.jpg',
          title: 'BBB',
          description: 'bbbbbb | 1234'
        },
        {
          imgUrl: 'https://img.alicdn.com/imgextra/i4/1917047079/TB2xhg2XAPoK1RjSZKbXXX1IXXa_!!1917047079.jpg_430x430q90.jpg',
          title: 'DDD',
          description: 'dddddd | 1234'
        }
      ],

      swiperTitleNull: scaleSize(80), // 标题滑动空白间距
      swiperTitleWidth: scaleSize(300), // 标题宽度
      swiperTitleHeight: scaleSize(130), // 标题高度

      paginationWidth: scaleSize(30), // 分页器大小
      paginationOpacity: [0.2, 1], // 分页器透明度
      paginationColor: '#000', // 分页器颜色
      
      defaultButtonScale: [0.9, 1], // 默认缩放区间
      defaultButtonOpacity: [0.4, 0.8], // 默认透明度区间
      setButtonZIndex: 100, // detail按钮默认zindex

      setDefaultDetailBottomHeight: 320, // 默认详情底部空白高度

      setDefaultDetailReturnTranslate: scaleSize(80), // 设置返回按钮位移

      setDetailBottomTranslate: 100, // 底部空白内容效果尺度

      setDetailButtonTitle: 'detail', // 按钮文案
      setDetailButtonColor: '#000', // 按钮背景颜色
      setDetailButtonRotateTitle: 'view', // 按钮文案
      setDetailButtonRotateColor: '#28b936', // 按钮背景颜色
    };
  }

  componentWillMount() {
    // 计算初始化页面布局
    let arr = this.state.imgArr;
    for (let i = 0; i < arr.length; i++) {
      arr[i].zIndex = arr.length - i;
    }

    this.setState({
      moveLeft: (scaleSize(750) - this.state.imgWidth)/2 + this.state.imgWidth,
      imgArr: arr,
      moveTop: this.state.swiperTitleHeight + this.state.swiperTitleNull,
      buttonScale: new Animated.Value(this.state.defaultButtonScale[1]),
      buttonOpacity: new Animated.Value(this.state.defaultButtonOpacity[1]),
      defaultImgScale: (this.state.swiperTop * 2 + this.state.imgHeight)/this.state.imgHeight,
      defaultDetailBottomHeight: this.state.deviceHeight * this.state.setDefaultDetailBottomHeight/1334,
      detailBottomTitleTranslate: new Animated.Value(this.state.setDetailBottomTranslate),
      detailBottomLineTranslate: new Animated.Value(this.state.setDetailBottomTranslate),
      detailBottomContentTranslate: new Animated.Value(this.state.setDetailBottomTranslate),
      buttonZIndex: this.state.setButtonZIndex,
      defaultDetailReturnTranslate: this.state.setDefaultDetailReturnTranslate,
      detailButtonTitle: this.state.setDetailButtonTitle,
      detailButtonColor: this.state.setDetailButtonColor,
    });

    // 绑定手势事件
    this._panResponder = PanResponder.create({
      onStartShouldSetPanResponder: (evt, gestureState) => true,
      onMoveShouldSetPanResponder: (evt, gestureState) => true,
      onPanResponderGrant: this._handlePanResponderGrant,
      onPanResponderMove: this._handlePanResponderMove,
      onPanResponderRelease: this._handlePanResponderEnd,
      onPanResponderTerminate: this._handlePanResponderEnd,
    });
  }

  _handlePanResponderGrant(evt, gestureState) {
    // console.log('start');
  }
  _handlePanResponderMove(evt, gestureState) {
    // console.log('move');
    if (Math.abs(gestureState.dx) > Math.abs(gestureState.dy)) {
      // console.log('横向滑动')
      if (gestureState.dx > 0 && this.state.sIndex > 0) {
        this.setState({
          isPrevMove: true
        });
        Animated.timing(
          this.state.translateX,
          {
            toValue: gestureState.dx - this.state.moveLeft * this.state.sIndex,
            duration: 0,
            useNativeDriver: true
          }
        ).start(); 
      } else if (gestureState.dx < 0 && this.state.sIndex < this.state.imgArr.length - 1) {
        this.setState({
          isPrevMove: false
        });
        Animated.timing(
          this.state.translateX,
          {
            toValue: gestureState.dx - this.state.moveLeft * this.state.sIndex,
            duration: 0,
            useNativeDriver: true
          }
        ).start(); 
      }
    }
  }
  _handlePanResponderEnd(evt, gestureState) {
    // console.log('end');
    if (gestureState.dx > this.state.deviceWidth/5 && this.state.sIndex > 0) {
      Animated.timing(
        this.state.translateX,
        {
          toValue: this.state.moveLeft - this.state.moveLeft * this.state.sIndex,
          duration: 300,
          easing: Easing.in(),
          useNativeDriver: true
        }
      ).start(() => {
        let index = this.state.sIndex - 1;
        this.setState({
          sIndex: index,
          isPrevMove: false
        })
      })
    } else if (gestureState.dx < -this.state.deviceWidth/5 && this.state.sIndex < this.state.imgArr.length - 1) {
      Animated.timing(
        this.state.translateX,
        {
          toValue: this.state.moveLeft * -1 - this.state.moveLeft * this.state.sIndex,
          duration: 300,
          easing: Easing.in(),
          useNativeDriver: true
        }
      ).start(() => {
        let index = this.state.sIndex + 1;
        this.setState({
          sIndex: index,
          isPrevMove: false
        })
      })
    } else {
      // console.log('复原');
      Animated.timing(
        this.state.translateX,
        {
          toValue: (this.state.moveLeft * (this.state.sIndex - 1) + this.state.moveLeft) * -1,
          duration: 300,
          easing: Easing.in(),
          useNativeDriver: true
        }
      ).start()
    }
  }

  // 按钮点击事件
  _onPressButton() {
    
    Animated.sequence([
      Animated.parallel([
        Animated.timing(
          this.state.buttonScale,
          {
            toValue: this.state.defaultButtonScale[0],
            duration: 150,
            useNativeDriver: true
          }
        ),
        Animated.timing(
          this.state.buttonOpacity,
          {
            toValue: this.state.defaultButtonOpacity[0],
            duration: 150,
            useNativeDriver: true
          }
        )
      ]),
      Animated.parallel([
        Animated.timing(
          this.state.buttonScale,
          {
            toValue: this.state.defaultButtonScale[1],
            duration: 150,
            useNativeDriver: true
          }
        ),
        Animated.timing(
          this.state.buttonOpacity,
          {
            toValue: this.state.defaultButtonOpacity[1],
            duration: 150,
            useNativeDriver: true
          }
        ),
        Animated.timing(
          this.state.imgScale,
          {
            toValue: this.state.defaultImgScale,
            duration: 500,
            delay: 50,
            useNativeDriver: true
          }
        ),
        Animated.timing(
          this.state.detailBottomTranslate,
          {
            toValue: -this.state.defaultDetailBottomHeight,
            duration: 500,
            delay: 50,
            useNativeDriver: true
          }
        ),
        Animated.timing(
          this.state.detailBottomTitleTranslate,
          {
            toValue: 0,
            duration: 300,
            delay: 100,
            useNativeDriver: true
          }
        ),
        Animated.timing(
          this.state.detailBottomLineTranslate,
          {
            toValue: 0,
            duration: 300,
            delay: 250,
            useNativeDriver: true
          }
        ),
        Animated.timing(
          this.state.detailBottomContentTranslate,
          {
            toValue: 0,
            duration: 300,
            delay: 400,
            useNativeDriver: true
          }
        ),
        Animated.timing(
          this.state.detailReturnTranslate,
          {
            toValue: -this.state.defaultDetailReturnTranslate,
            duration: 300,
            delay: 500,
            useNativeDriver: true
          }
        ),
        Animated.timing(
          this.state.detailBottomButtonRotate,
          {
            toValue: 180,
            duration: 300,
            delay: 1250,
            useNativeDriver: true
          }
        )
      ])
    ]).start();

    this.setState({
      scaleImgZIndex: this.state.setButtonZIndex
    })
    
    let _this = this;

    // 按钮翻转样式文案更改
    setTimeout(() => {
      _this.setState({
        detailButtonTitle: this.state.setDetailButtonRotateTitle,
        detailButtonColor: this.state.setDetailButtonRotateColor,
        detailButtonTitleRotate: '-180deg'
      })
    }, 1400)
  }

  // 返回按钮点击事件
  _onReturnButton() {
    // console.log('1234567');
    
    Animated.parallel([
      Animated.timing(
        this.state.imgScale,
        {
          toValue: 1,
          duration: 500,
          useNativeDriver: true
        }
      ),
      Animated.timing(
        this.state.detailBottomTranslate,
        {
          toValue: 0,
          duration: 500,
          useNativeDriver: true
        }
      ),
      Animated.timing(
        this.state.detailBottomTitleTranslate,
        {
          toValue: 100,
          duration: 300,
          useNativeDriver: true
        }
      ),
      Animated.timing(
        this.state.detailBottomLineTranslate,
        {
          toValue: 100,
          duration: 300,
          useNativeDriver: true
        }
      ),
      Animated.timing(
        this.state.detailBottomContentTranslate,
        {
          toValue: 100,
          duration: 300,
          useNativeDriver: true
        }
      ),
      Animated.timing(
        this.state.detailReturnTranslate,
        {
          toValue: 0,
          duration: 100,
          useNativeDriver: true
        }
      ),
      Animated.timing(
        this.state.detailBottomButtonRotate,
        {
          toValue: 0,
          duration: 0,
          delay: 500,
          useNativeDriver: true
        }
      )
    ]).start();


    let _this = this;

    setTimeout(() => {
      _this.setState({
        scaleImgZIndex: 0
      })
    }, 500)

    // 按钮翻转样式文案更改
    setTimeout(() => {
      _this.setState({
        detailButtonTitle: this.state.setDetailButtonTitle,
        detailButtonColor: this.state.setDetailButtonColor,
        detailButtonTitleRotate: '0deg'
      })
    }, 500)
  }

  render() {

    const {
      deviceWidth,
      imgArr,
      translateX,
      swiperWidth,
      imgWidth,
      imgHeight,
      moveLeft,
      sIndex,
      defaultScale,
      isPrevMove,
      defaultOpacity,
      swiperTitleNull,
      swiperTitleHeight,
      swiperTitleWidth,
      moveTop,
      paginationWidth,
      paginationOpacity,
      paginationColor,
      buttonScale,
      buttonOpacity,
      imgScale,
      buttonZIndex,
      detailBottomTranslate,
      defaultDetailBottomHeight,
      detailReturnTranslate,
      defaultDetailReturnTranslate,
      detailBottomLineTranslate,
      detailBottomContentTranslate,
      detailBottomTitleTranslate,
      detailBottomButtonRotate,
      detailButtonTitle,
      detailButtonColor,
      detailButtonTitleRotate,
      swiperTop,
      defaultImgScale,
      scaleImgZIndex } = this.state;
    
    let transformArr = []; // 卡片位置变化
    let opacityArr = []; // swiper颜色蒙层变化
    let paginationOpacityArr = [];  // 分页器颜色变化
    let consoleArr = [];

    // 计算位移
    for (let i = 0; i < imgArr.length; i++) {

      let scale = 1 - ((1 - defaultScale)/(imgArr.length - 1) * Math.abs(i - sIndex - 1));
      let _translateX = (swiperWidth - imgWidth)/(imgArr.length - 1) * Math.abs(i - sIndex - 1) + (imgWidth - scale * imgWidth)/2;

      let scale2 = 1 - ((1 - defaultScale)/(imgArr.length - 1) * Math.abs(i - sIndex));
      let _translateX2 = (swiperWidth - imgWidth)/(imgArr.length - 1) * Math.abs(i - sIndex) + (imgWidth - scale2 * imgWidth)/2;

      let transform;
      let opacity;
      let _paginationOpacity;

      if (i == sIndex) {

        if (isPrevMove) {

          // consoleArr.push([0, _translateX, 1, scale]);

          transform = [{translateX: translateX.interpolate({
            inputRange: [-moveLeft * sIndex, -moveLeft * (sIndex - 1)],
            outputRange: [0, _translateX],
          })}, {scaleX: translateX.interpolate({
            inputRange: [-moveLeft * sIndex, -moveLeft * (sIndex - 1)],
            outputRange: [1, scale],
          })}, {scaleY: translateX.interpolate({
            inputRange: [-moveLeft * sIndex, -moveLeft * (sIndex - 1)],
            outputRange: [1, scale],
          })}];

          opacity = translateX.interpolate({
            inputRange: [-moveLeft * sIndex, -moveLeft * (sIndex - 1)],
            outputRange: [defaultOpacity[0], defaultOpacity[1]]
          });

          _paginationOpacity = translateX.interpolate({
            inputRange: [-moveLeft * sIndex, -moveLeft * (sIndex - 1)],
            outputRange: [paginationOpacity[1], paginationOpacity[0]]
          });
        } else {

          // consoleArr.push([-moveLeft, 0, scale, 1]);
          
          transform = [{translateX: translateX.interpolate({
            inputRange: [-moveLeft * (sIndex + 1), -moveLeft * sIndex],
            outputRange: [-moveLeft, 0],
          })}, {scaleX: translateX.interpolate({
            inputRange: [-moveLeft * (sIndex + 1), -moveLeft * sIndex],
            outputRange: [scale, 1],
          })}, {scaleY: translateX.interpolate({
            inputRange: [-moveLeft * (sIndex + 1), -moveLeft * sIndex],
            outputRange: [scale, 1],
          })}];

          opacity = translateX.interpolate({
            inputRange: [-moveLeft * (sIndex + 1), -moveLeft * sIndex],
            outputRange: [0, 0]
          });

          _paginationOpacity = translateX.interpolate({
            inputRange: [-moveLeft * (sIndex + 1), -moveLeft * sIndex],
            outputRange: [paginationOpacity[0], paginationOpacity[1]]
          });
        }
      } else if (i > sIndex) {

        // consoleArr.push([_translateX, _translateX2, scale, scale2]);

        transform = [{translateX: translateX.interpolate({
          inputRange: [-moveLeft * (sIndex + 1), -moveLeft * sIndex],
          outputRange: [_translateX, _translateX2],
        })}, {scaleX: translateX.interpolate({
          inputRange: [-moveLeft * (sIndex + 1), -moveLeft * sIndex],
          outputRange: [scale, scale2],
        })}, {scaleY: translateX.interpolate({
          inputRange: [-moveLeft * (sIndex + 1), -moveLeft * sIndex],
          outputRange: [scale, scale2],
        })}];

        if (i - sIndex == 1 && !isPrevMove) {

          opacity = translateX.interpolate({
            inputRange: [-moveLeft * (sIndex + 1), -moveLeft * sIndex],
            outputRange: [defaultOpacity[0], defaultOpacity[1]]
          });
          _paginationOpacity = translateX.interpolate({
            inputRange: [-moveLeft * (sIndex + 1), -moveLeft * sIndex],
            outputRange: [paginationOpacity[1], paginationOpacity[0]]
          });
        } else {

          opacity = translateX.interpolate({
            inputRange: [-moveLeft * (sIndex + 1), -moveLeft * sIndex],
            outputRange: [defaultOpacity[1], defaultOpacity[1]]
          });
          _paginationOpacity = translateX.interpolate({
            inputRange: [-moveLeft * (sIndex + 1), -moveLeft * sIndex],
            outputRange: [paginationOpacity[0], paginationOpacity[0]]
          });
        }
        
      } else {

        // consoleArr.push([-moveLeft * (sIndex + 1 - i), -moveLeft * (sIndex - i), scale, scale2]);
        
        transform = [{translateX: translateX.interpolate({
          inputRange: [-moveLeft * (sIndex + 1), -moveLeft * sIndex],
          outputRange: [-moveLeft * (sIndex + 1 - i), -moveLeft * (sIndex - i)],
        })}, {scaleX: translateX.interpolate({
          inputRange: [-moveLeft * (sIndex + 1), -moveLeft * sIndex],
          outputRange: [scale, scale2],
        })}, {scaleY: translateX.interpolate({
          inputRange: [-moveLeft * (sIndex + 1), -moveLeft * sIndex],
          outputRange: [scale, scale2],
        })}];

        opacity = translateX.interpolate({
          inputRange: [-moveLeft * (sIndex + 1), -moveLeft * sIndex],
          outputRange: [0, 0]
        });

        if (sIndex - i == 1 && isPrevMove) {

          _paginationOpacity = translateX.interpolate({
            inputRange: [-moveLeft * sIndex, -moveLeft * (sIndex -1)],
            outputRange: [paginationOpacity[0], paginationOpacity[1]]
          });
        } else {

          _paginationOpacity = translateX.interpolate({
            inputRange: [-moveLeft * (sIndex + 1), -moveLeft * sIndex],
            outputRange: [paginationOpacity[0], paginationOpacity[0]]
          });
        }
      }
      transformArr.push(transform);
      opacityArr.push(opacity);
      paginationOpacityArr.push(_paginationOpacity);
    }
    // console.log(consoleArr);

    return (
      <View style={styles.container}>
        <TextInput
          style={{height: 40, borderColor: 'gray', borderWidth: 1}}
          onChangeText={(text) => this.setState({text})}
          value={this.state.text}
          keyboardType='ascii-capable'
          keyboardAppearance='dark'
        />
        <Animated.Image
          shouldRasterizeIOS={true}
          renderToHardwareTextureAndroid={true}
          style={{
            ...styles.transformImage,
            top: swiperTop,
            // opacity: imgScale > 1 ? 1 : 0,
            opacity: imgScale.interpolate({
              inputRange: [1, 1.01, defaultImgScale],
              outputRange: [0, 1, 1],
            }),
            zIndex: scaleImgZIndex,
            width: imgWidth,
            height: imgHeight,
            transform: [
              {
                scale: imgScale
              }
            ]
          }}
          source={{uri: imgArr[sIndex].imgUrl}} />
        {/* 标题部分 */}
        <View style={{
          ...styles.swiperTitle,
          width: swiperTitleWidth,
          height: swiperTitleHeight
        }} >
          <Animated.View
            shouldRasterizeIOS={true}
            renderToHardwareTextureAndroid={true}
            style={{
              transform: [{
                translateY: translateX.interpolate({
                  inputRange: [-moveLeft * sIndex, -moveLeft * (sIndex - 1)],
                  outputRange: [-moveTop * sIndex, -moveTop * (sIndex - 1)],
                })
              }]
            }} >
          {
            imgArr.map((item, index) => {
              return <View
                key={index}
                style={{
                  height: swiperTitleHeight + swiperTitleNull
                }} >
                <Text style={styles.title}>{item.title}</Text>
                <Text style={styles.description}>{item.description}</Text>
                <View style={{height: swiperTitleNull}} />
              </View>
            })
          }
          </Animated.View>
        </View>
        {/* 滑块部分 */}
        <View
          {...this._panResponder.panHandlers}            
          style={{
            ...styles.swiperContainer,
            height: imgHeight
          }} >
          {
            imgArr.map((item, index) => {
              return <Animated.View
                key={index}
                shouldRasterizeIOS={true}
                renderToHardwareTextureAndroid={true}
                style={{
                  ...styles.transformView,
                  zIndex: item.zIndex,
                  width: imgWidth,
                  height: imgHeight,
                  transform: transformArr[index],
                  left: (deviceWidth - swiperWidth)/2
                }} >
                <Animated.Image
                  shouldRasterizeIOS={true}
                  renderToHardwareTextureAndroid={true}
                  style={{
                    width: imgWidth,
                    height: imgHeight,
                    // transform: [
                    //   {
                    //     scale: sIndex == index ? imgScale : 1
                    //   }
                    // ]
                  }}
                  source={{uri: item.imgUrl}} />
                <Animated.View
                  shouldRasterizeIOS={true}
                  renderToHardwareTextureAndroid={true}
                  style={{
                    ...styles.cover,
                    opacity: opacityArr[index],
                    width: imgWidth,
                    height: imgHeight
                  }} />
              </Animated.View>
            })
          }
          <TouchableWithoutFeedback onPress={this._onPressButton} style={styles.detailPress}>
            <Animated.View style={{
              ...styles.detailView,
              opacity: buttonOpacity,
              zIndex: buttonZIndex,
              transform: [{scaleX: buttonScale}, {scaleY: buttonScale}]}}>
              <Text style={styles.detailTitle}>Details</Text>
            </Animated.View>
          </TouchableWithoutFeedback>
        </View>
        {/* 分页器部分 */}
        <View style={{...styles.pagination, height: paginationWidth}}>
        {
          imgArr.map((item, index) => {
            return <Animated.View
              key={index}
              shouldRasterizeIOS={true}
              renderToHardwareTextureAndroid={true}
              style={{
                width: paginationWidth,
                height: paginationWidth,
                borderRadius: paginationWidth/2,
                borderColor: paginationColor,
                opacity: paginationOpacityArr[index],
                borderWidth: scaleSize(6),
                marginRight: scaleSize(20)
              }} />
          })
        }
        </View>
        <Animated.View 
          shouldRasterizeIOS={true}
          renderToHardwareTextureAndroid={true}
          style={{
            ...styles.detailBottomView,
            bottom: -defaultDetailBottomHeight,
            height: defaultDetailBottomHeight,
            transform: [{translateY: detailBottomTranslate}]}}>
          <Animated.View
            shouldRasterizeIOS={true}
            renderToHardwareTextureAndroid={true}
            style={{
              ...styles.detailBottomTitleView,
              transform: [{translateY: detailBottomTitleTranslate}]
            }}>
            <Text style={styles.detailBottomTitle}>The wizard of Oz</Text>
            <Animated.View
              shouldRasterizeIOS={true}
              renderToHardwareTextureAndroid={true}
              style={{
                ...styles.detailBottomButton,
                backgroundColor: detailButtonColor,
                opacity: detailBottomButtonRotate.interpolate({
                  inputRange: [0, 90, 180],
                  outputRange: [1, 0.6, 1]
                }),
                transform: [{rotateY: detailBottomButtonRotate.interpolate({
                  inputRange: [0, 180],
                  outputRange: ['0deg', '180deg'],
                })}]
              }}>
              <Text style={{
                ...styles.detailBottomButtonTitle,
                transform: [{rotateY: detailButtonTitleRotate}]
              }}>{detailButtonTitle}</Text>
            </Animated.View>
          </Animated.View>
          <Animated.View
            shouldRasterizeIOS={true}
            renderToHardwareTextureAndroid={true}
            style={{
              ...styles.detailBottomLine,
              transform: [{translateY: detailBottomLineTranslate}]
            }}/>
          <Animated.View
            shouldRasterizeIOS={true}
            renderToHardwareTextureAndroid={true}
            style={{
              ...styles.detailBottomContent,
              transform: [{translateY: detailBottomContentTranslate}]
            }}>
            <Text style={styles.title}>{imgArr[sIndex].title}</Text>
            <Text style={styles.description}>{imgArr[sIndex].description}</Text>
          </Animated.View>
        </Animated.View>
        <Animated.View
          shouldRasterizeIOS={true}
          renderToHardwareTextureAndroid={true}
          style={{
            ...styles.detailReturnView,
            marginLeft: defaultDetailReturnTranslate,
            opacity: detailReturnTranslate.interpolate({
              inputRange: [-defaultDetailReturnTranslate, 0],
              outputRange: [1, 0]
            }),
            transform: [{translateX: detailReturnTranslate}]}}>
          <TouchableWithoutFeedback onPress={this._onReturnButton}>
            <View>
              <Text style={styles.detailReturnTitle}>&lt;- Return</Text>
            </View>
          </TouchableWithoutFeedback>
        </Animated.View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-start',
    backgroundColor: '#F5FCFF',
    position: 'relative',
  },
  swiperContainer: {
    flex: 0,
    zIndex: 1,
    justifyContent: 'flex-start',
    // alignItems: 'center',
    backgroundColor: 'transparent',
    position: 'relative',
    width: Dimensions.get('window').width,
    marginTop: scaleSize(100)
  },
  transformView: {
    position: 'absolute',
    // overflow: 'auto'
  },
  transformImage: {
    position: 'absolute',
    left: scaleSize(70),
  },
  cover: {
    position: 'absolute',
    left: 0,
    top: 0,
    backgroundColor: '#ffffff',
  },
  swiperTitle: {
    flex: 0,
    overflow: 'hidden',
    backgroundColor: 'transparent',
    marginLeft: scaleSize(70),
    marginTop: scaleSize(100)
  },
  title: {
    fontSize: scaleSize(70),
    lineHeight: scaleSize(80)
  },
  description: {
    fontSize: scaleSize(40),
    lineHeight: scaleSize(40)
  },
  pagination: {
    flex: 0,
    marginLeft: scaleSize(70),
    flexDirection: 'row',
    justifyContent: 'flex-start',
    alignItems: 'flex-start',
    marginTop: scaleSize(50)
  },
  detailPress: {
  },
  detailView: {
    width: scaleSize(150),
    height: scaleSize(60),
    // marginLeft: scaleSize(110),
    position: 'absolute',
    bottom: scaleSize(40),
    left: scaleSize(110),
    // marginTop: scaleSize(440),
    backgroundColor: 'rgb(255,255,255)',
    borderRadius: scaleSize(12)
  },
  detailTitle: {
    textAlign: 'center',
    fontSize: scaleSize(30),
    lineHeight: scaleSize(60),
    color: '#000'
  },
  detailReturnView: {
    position: 'absolute',
    top: scaleSize(80),
    left: scaleSize(70),
    zIndex: 100
  },
  detailReturnTitle: {
    fontSize: scaleSize(50),
    lineHeight: scaleSize(50),
    color: 'rgb(255,255,255)',
  },
  detailBottomView: {
    width: Dimensions.get('window').width,
    position: 'absolute',
    backgroundColor: 'rgb(255,255,255)',
    zIndex: 100,
    paddingLeft: scaleSize(70),
    paddingRight: scaleSize(70),
  },
  detailBottomTitleView: {
    height: scaleSize(120),
    flex: 0,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center'
  },
  detailBottomTitle: {
    textAlign: 'left',
    fontSize: scaleSize(30),
    color: '#000'
  },
  detailBottomButton: {
    width: scaleSize(140),
    height: scaleSize(50),
    backgroundColor: '#000',
    justifyContent: 'center',
    borderRadius: scaleSize(6)
  },
  detailBottomButtonTitle: {
    textAlign: 'center',
    fontSize: scaleSize(24),
    color: '#fff'
  },
  detailBottomLine: {
    backgroundColor: '#ddd',
    height: scaleSize(1),
  },
  detailBottomContent: {
    flex: 1,
    justifyContent: 'center',
  }
});